import React, { memo } from 'react';

import { TopRankingWrapper } from './style';

export default memo(function ASTopRanking() {


  return (
    <TopRankingWrapper>
      <div className="header">
        <div className="image">
          <img src='https://p4.music.126.net/pcYHpMkdC69VVvWiynNklA==/109951166952713766.jpg?param=100y100' alt="" />
          <a href="/todo" className="image_cover">ranking</a>
        </div>
        <div className="info">
          <a href="/todo">飙升榜</a>
          <div>
            <button className="btn play sprite_02"></button>
            <button className="btn favor sprite_02"></button>
          </div>
        </div>
      </div>
      <div className="list">
      
            
              <div className="list-item">
                <div className="rank">1</div>
                <div className="info">
                  <span className="name text-nowrap">没有数据</span>
                  <div className="operate">
                    <button className="btn sprite_02 play" 
                            ></button>
                    <button className="btn sprite_icon2 addto"></button>
                    <button className="btn sprite_02 favor"></button>
                  </div>
                </div>
              </div>
              <div className="list-item">
                <div className="rank">2</div>
                <div className="info">
                  <span className="name text-nowrap">没有数据</span>
                  <div className="operate">
                    <button className="btn sprite_02 play" 
                            ></button>
                    <button className="btn sprite_icon2 addto"></button>
                    <button className="btn sprite_02 favor"></button>
                  </div>
                </div>
              </div>
              <div className="list-item">
                <div className="rank">3</div>
                <div className="info">
                  <span className="name text-nowrap">没有数据</span>
                  <div className="operate">
                    <button className="btn sprite_02 play" 
                            ></button>
                    <button className="btn sprite_icon2 addto"></button>
                    <button className="btn sprite_02 favor"></button>
                  </div>
                </div>
              </div>
              <div className="list-item">
                <div className="rank">4</div>
                <div className="info">
                  <span className="name text-nowrap">没有数据</span>
                  <div className="operate">
                    <button className="btn sprite_02 play" 
                            ></button>
                    <button className="btn sprite_icon2 addto"></button>
                    <button className="btn sprite_02 favor"></button>
                  </div>
                </div>
              </div>

              <div className="list-item">
                <div className="rank">5</div>
                <div className="info">
                  <span className="name text-nowrap">没有数据</span>
                  <div className="operate">
                    <button className="btn sprite_02 play" 
                            ></button>
                    <button className="btn sprite_icon2 addto"></button>
                    <button className="btn sprite_02 favor"></button>
                  </div>
                </div>
              </div>
              <div className="list-item">
                <div className="rank">6</div>
                <div className="info">
                  <span className="name text-nowrap">没有数据</span>
                  <div className="operate">
                    <button className="btn sprite_02 play" 
                            ></button>
                    <button className="btn sprite_icon2 addto"></button>
                    <button className="btn sprite_02 favor"></button>
                  </div>
                </div>
              </div>
              <div className="list-item">
                <div className="rank">7</div>
                <div className="info">
                  <span className="name text-nowrap">没有数据</span>
                  <div className="operate">
                    <button className="btn sprite_02 play" 
                            ></button>
                    <button className="btn sprite_icon2 addto"></button>
                    <button className="btn sprite_02 favor"></button>
                  </div>
                </div>
              </div>
              <div className="list-item">
                <div className="rank">8</div>
                <div className="info">
                  <span className="name text-nowrap">没有数据</span>
                  <div className="operate">
                    <button className="btn sprite_02 play" 
                            ></button>
                    <button className="btn sprite_icon2 addto"></button>
                    <button className="btn sprite_02 favor"></button>
                  </div>
                </div>
              </div>
              <div className="list-item">
                <div className="rank">9</div>
                <div className="info">
                  <span className="name text-nowrap">没有数据</span>
                  <div className="operate">
                    <button className="btn sprite_02 play" 
                            ></button>
                    <button className="btn sprite_icon2 addto"></button>
                    <button className="btn sprite_02 favor"></button>
                  </div>
                </div>
              </div>
              <div className="list-item">
                <div className="rank">10</div>
                <div className="info">
                  <span className="name text-nowrap">没有数据</span>
                  <div className="operate">
                    <button className="btn sprite_02 play" 
                            ></button>
                    <button className="btn sprite_icon2 addto"></button>
                    <button className="btn sprite_02 favor"></button>
                  </div>
                </div>
              </div>
      </div>
      <div className="footer">
        <a href="/todo">查看全部 &gt;</a>
      </div>
    </TopRankingWrapper>
  )
})










// import React, { memo } from 'react';
// import { useDispatch } from 'react-redux';

// import { getSizeImage } from '../../utils/format-utils';
// import { getSongDetailAction } from '../../pages/player/store';

// import { TopRankingWrapper } from './style';

// export default memo(function ASTopRanking(props) {
//   // props and state
//   const { info } = props;
//   const { tracks = [] } = info;

//   // redux hooks
//   const dispatch = useDispatch();

//   // other handle
//   const playMusic = (item) => {
//     dispatch(getSongDetailAction(item.id));
//   }

//   return (
//     <TopRankingWrapper>
//       <div className="header">
//         <div className="image">
//           <img src={getSizeImage(info.coverImgUrl)} alt="" />
//           <a href="/todo" className="image_cover">ranking</a>
//         </div>
//         <div className="info">
//           <a href="/todo">{info.name}</a>
//           <div>
//             <button className="btn play sprite_02"></button>
//             <button className="btn favor sprite_02"></button>
//           </div>
//         </div>
//       </div>
//       <div className="list">
//         {
//           tracks.slice(0, 10).map((item, index) => {
//             return (
//               <div key={item.id} className="list-item">
//                 <div className="rank">{index + 1}</div>
//                 <div className="info">
//                   <span className="name text-nowrap">{item.name}</span>
//                   <div className="operate">
//                     <button className="btn sprite_02 play" 
//                             onClick={e => playMusic(item)}></button>
//                     <button className="btn sprite_icon2 addto"></button>
//                     <button className="btn sprite_02 favor"></button>
//                   </div>
//                 </div>
//               </div>
//             )
//           })
//         }
//       </div>
//       <div className="footer">
//         <a href="/todo">查看全部 &gt;</a>
//       </div>
//     </TopRankingWrapper>
//   )
// })
